let page = 0;
let length = $('.banner-img li').length;

//初始化dot
$('.banner-img li').each(function(item, index) {
    $('.banner .dot').append($('<li>'))
})
$('.banner-img li:eq(0)').addClass('active');
$('.banner .dot li:eq(0)').addClass('active');

//向后
$('.banner .btn a:eq(1)').click(function() {
    $(`.banner-img li:eq(${page})`).removeClass('active');
    $(`.banner .dot li:eq(${page})`).removeClass('active');
    if(page == length-1) page = -1;
    $(`.banner-img li:eq(${++page})`).addClass('active');
    $(`.banner .dot li:eq(${page})`).addClass('active');
    bg()
})

//向前
$('.banner .btn a:eq(0)').click(function() {
    $(`.banner-img li:eq(${page})`).removeClass('active');
    $(`.banner .dot li:eq(${page})`).removeClass('active');
    if(page == 0) page = length;
    $(`.banner-img li:eq(${--page})`).addClass('active');
    $(`.banner .dot li:eq(${page})`).addClass('active');
    bg()
})

//背景阴影
function bg() {
    let imgSrc = $(`.banner-img li:eq(${page}) img`).attr('src');
    $('.banner-wrap .bg').css('backgroundImage', `url(${imgSrc})`);
}